<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <!--title后接的是普通字符串，加:后接的是变量-->
      <Category title="热门游戏列表">
        <template v-slot:s1>
          <ul>
            <li v-for="item in games" :key="item.id">{{ item.name }}</li>
          </ul>
        </template>
      </Category>
      <Category title="今日美食城市">
        <template v-slot:s1>
          <img :src="imgURL" alt="重庆冒菜" />
        </template>
        <template v-slot:s2>
          <h3>简介</h3>
          <h4>
            重庆冒菜以其麻辣鲜香的特点深受人们喜爱，其独特的味道和丰富的食材选择使其成为餐桌上的常客。以下是一个详细的重庆冒菜做法及配方，帮助你在家轻松制作出美味的冒菜。
            主要食材和调料
            鸡胸肉、‌土豆片、‌藕片、‌宽粉、‌芹菜、‌香菇、‌素毛肚、豆皮、午餐肉、芹菜末、‌葱花、‌蒜泥、‌红油辣椒、芝麻调和油、原汤。
          </h4>
        </template>
      </Category>
      <Category title="今日影视推荐">
        <template v-slot:s1>
          <video :src="videoURL" controls></video>
        </template>
      </Category>
    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from "vue";
//import Category from "./Category.vue";

let games = ref([
  {
    id: "abc001",
    name: "王者荣耀",
  },
  {
    id: "abc002",
    name: "原神",
  },
  {
    id: "abc003",
    name: "星穹铁道",
  },
  {
    id: "abc004",
    name: "黑神话悟空",
  },
  {
    id: "abc005",
    name: "第五人格",
  },
  {
    id: "abc006",
    name: "蛋仔派对",
  },
  {
    id: "abc007",
    name: "恋与深空",
  },
  {
    id: "abc008",
    name: "时光中的绘旅人",
  },
]);

let imgURL = ref("https://z1.ax1x.com/2023/11/19/piNxLo4.jpg");
let videoURL = ref("http://vjs.zencdn.net/v/oceans.mp4");
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
.content {
  display: flex;
}
img {
  width: 100%;
}
video {
  width: 100%;
}
h3 {
  font-size: 10px;
  margin: 0px;
}
h4 {
  font-size: 11px;
}
</style>